<template>
    <div class="address">
      <div class="title">
        <van-icon size="24" @click="goBack" name="arrow-left" />
        <div class="sh">收货地址</div>
      </div>
      <ul>
        <li
        @click="getid(index)"
          ref="addresList"
          v-for="(item, index) in allAddress"
          :key="index"
        >
          <div class="address-name">
            <div style="font-size: 18px;  width: 80vw;">
              {{ item.name }}<i>{{ item.tel }}</i>
              <span v-if="item.isDefault" style="font-size: 12px; color: white;padding: 1px 4px;background-color: #ff5934;display: inline-block;border-radius: 3px;margin-left: 10px;">默认</span>
            </div>
              <div @click="deletAddress(index)" style="color: #7f7f7f">删除</div>
           
          </div>
          <div class="address-ads">
            <span>{{ item.province }}</span>
            <span>{{ item.city }}</span>
            <span>{{ item.county }}</span>
          </div>
          <div class="address-detail">
            {{ item.addressDetail }}
          </div>
        </li>
      </ul>
      <router-link to="newaddress">
        <div class="bottom">+ 新建收货地址</div>
        
      </router-link>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted,ref } from "vue";
  import { useUserStore } from "../../../stores/userStore/user";
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { setObj} from '@/typings'
  
  
  const userStore = useUserStore();
  const allAddress = ref<Array<setObj>>([])
    allAddress.value = userStore.address
  
  const goBack = () => {
    window.history.back();    
  };
  const getid = (index) =>{
    userStore.address[index].id = index+1;
    userStore.removeId()
    console.log(userStore.address);
    
  }


  const deletAddress = (i:number) => {
      ElMessageBox.confirm(
      '确定删除当前地址?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }
    )
      .then(() => { 
        ElMessage({
          type: 'success',
          message: '删除成功',
        }),
        userStore.address = userStore.address.filter((a, index:number) => {
            console.log(a);
            
            return i !== index
        });
        allAddress.value = userStore.address
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
    
  };
  onMounted(() => {
    userStore.removeId
    console.log(userStore.address);
    console.log(userStore.id);
    
  });
  </script>
  <style scoped>
 
  .address{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: white;
    z-index: 999;
  }
  .title {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: #a9a9a9;
  }
  .sh {
    flex: 0 0 53vw;
    color: black;
  }
  .bottom {
    position: absolute;
    bottom: 10vh;
    left: 5%;
    margin: 0 auto;
    margin-top: 80vh;
    width: 90vw;
    border-radius: 999px;
    background-color: #ff5e2d;
    text-align: center;
    line-height: 2.5;
    color: white;
    font-weight: bold;
  }
  .address-name {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    margin-top: 20px;
  }
  .address-name i {
    margin-left: 5px;
  }
  .address-ads {
    padding: 0 12px;
    font-size: 14px;
    color: #7f7f7f;
  }
  .address-ads span {
    margin-right: 5px;
  }
  .address-detail {
    font-size: 14px;
    padding: 0 12px;
    color: #7f7f7f;
    border-bottom: 1px solid#ededed;
  }
  </style>
  